<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      title="分类设置"
      class="cliassify"
      width="500"
      :before-close="handleClose"
    >
      <div class="classForm">

        <div
          class="classify"
          v-for="(item, index) in classifyCount"
          :key="index"
        >
          <span
            style="font-size: 16px;color: #696969;">{{ item.name }}{{ index+1}}：</span>
          <el-input
            v-model="item.classify"
            style="width: 280px;"
            maxlength="20"
          ></el-input>
          <el-button
            v-if="index === classifyCount.length - 1"
            size="small"
            circle
            style="margin-left:10px;"
            @click="addClassify(index)"
          >
            <el-icon>
              <Plus />
            </el-icon>
          </el-button>

          <el-button
            size="small"
            circle
            style="margin-left:10px;"
            @click="reduceClassify(index)"
            :disabled="classifyCount.length === 1"
          >

            <el-icon>
              <Minus />
            </el-icon>
          </el-button>

        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button
            @click="cancel"
            class="cancelButton"
          >取消</el-button>
          <el-button
            type="primary"
            @click="confirm"
            class="saveButton"
          >
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
// 引入新增题目分类，查询题目分类，修改题分类的方法
import { addQuestionType, getQuestionType, updateQuestionType, deleteQuestionType } from '@/api/assessment/questionmanage.js'
import { ElMessage } from 'element-plus'
const props = defineProps({
  classifyVisible: {
    type: Boolean,
    default: false
  }
})

const dialogVisible = ref(false)


const classifyCount = ref([
  { name: '分类', classify: '', sourceType: 0 },
])

// 添加分类的方法
function addClassify (index) {
  classifyCount.value.push({ name: '分类', classify: '', sourceType: 0 })
}

// 删除分类的方法
async function reduceClassify (index) {

  console.log(classifyCount.value[index])
  if (classifyCount.value[index].id == 0 || classifyCount.value[index].id) {
    await deleteQuestionType(Number(classifyCount.value[index].id))
    classifyCount.value.splice(index, 1)
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
  } else {
    classifyCount.value.splice(index, 1)
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
  }
}

const classifyInfo = ref([])
// 获取分类
async function getQuestionTypes () {
  const res = await getQuestionType({ sourceType: 0 })
  // console.log(res)
  let classifyList = res.rows.map((item) => {
    return {
      ...item,
      name: '分类',
      sourceType: 0
    }
  })
  classifyCount.value = classifyList
}
getQuestionTypes()

// 确定的方法
async function confirm () {
  let isEmpty = classifyCount.value.find((item, index) => {
    return item.classify === ''
  })
  if (isEmpty) {
    return ElMessage({
      type: 'warning',
      message: `分类不能为空`
    })
  } else {
    const res = await addQuestionType(classifyCount.value)

    dialogVisible.value = false
    ElMessage({
      type: 'success',
      message: '操作成功'
    })
  }

}

// 取消的方法
function cancel () {
  dialogVisible.value = false

}

// 处理关闭之前的方法
function handleClose () {
  dialogVisible.value = false

}

defineExpose({
  dialogVisible,
  cancel
})

</script>

<style lang='scss' scoped>
.classForm {
  padding: 0px 25px 0 25px;
  .classify {
    display: flex;
    align-items: center;
    margin-top: 24px;
    ::v-deep(.el-input__wrapper) {
      height: 36px;
      border: 1px solid #696969;
    }
  }
}

.cancelButton {
  width: 108px;
  height: 40px;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #5974ff;
  font-size: 16px;
  color: #5974ff;
  &:hover {
    background-color: transparent;
  }
}

.saveButton {
  width: 108px;
  height: 40px;
  background: #5974ff;
  border-radius: 6px 6px 6px 6px;
  font-size: 16px;
  color: #ffffff;
  border: none;
}



::v-deep(.el-dialog) {
  margin-top: -160px !important;
}
</style>
